<template>
    <MainBox :data="dataInfo" :paddingLeft="10" :widthLeft="260">
        <template #leftFoot>
            <div class="flexAuto p-y-8">
                <SelectCom type="Materiel" title="物料" @selectBtn="selectGoodBtn">
                    <template #search="{ search }" v-if="$slots.search">
                        <slot name="search" :search="search" />
                    </template>
                    <el-button class="wAuto " icon="Plus">选择物料</el-button>
                </SelectCom>
            </div>
        </template>
        <template #left>
            <el-form class="list-b-1" label-position="left" label-width="auto">
                <template v-for="item in dataInfo.goodThead">
                    <ElFormItemBox :label="item.label">
                        {{ dataInfo.good[item.prop] || '--' }}{{ item.unit || '' }}
                    </ElFormItemBox>
                </template>
                <ElFormItemBox label="">
                    <ElDaysBox :data="dataInfo.search" :dataName="['beginTime', 'endTime']" @changeBtn="getList()" />
                </ElFormItemBox>
            </el-form>
        </template>
        <template #default>
            <CellBox title="结存信息" isTop>
                <FlexBox :list="3" :margin="1">
                    <template v-for="item in dataInfo.closingBalanceThead">
                        <template v-for="children in item.children">
                            <ElFormItemBox :label="`${item.label}${children.label}`">
                                <span :class="{
                                    'text-color-error': dataInfo.closingBalance[children.prop],
                                }">{{
                                    dataInfo.closingBalance[children.prop] || '--' }}</span>
                            </ElFormItemBox>
                        </template>

                    </template>
                </FlexBox>
            </CellBox>
            <CellBox title="库存信息" isTop>
                <TableBoxMx :data="dataInfo.table" :margin="0">
                </TableBoxMx>
            </CellBox>
        </template>
    </MainBox>
</template>
<script setup lang="ts">
const { proxy } = getCurrentInstance() as any;
import CellBox from '../../components/CellBox.vue';
import './pageCss.scss'; // 引入样式
import { useListComponent } from './pageTs'; // 引入逻辑
const { dataInfo, getList, selectGoodBtn } = useListComponent();

onMounted(() => {

});
</script>
